<template>
    <van-skeleton title :row="3" />
    <van-nav-bar
  title="标题"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div>
<van-tabs v-model:active="active">
  <van-tab title="标签 1" >
    <van-swipe-cell  v-for="item in cartData">
  <van-card
  :price="item.goods.goods_price"
    :title="item.goods.goods_name"
>
<template #thumb>
    <div style="width: 160px;height: 60px;display: flex;">
        <van-checkbox v-model="item.checked"></van-checkbox>
        <img :src="item.goods.goods_big_logo?item.goods.goods_big_logo:'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'" alt="" style="width: 60px;height: 60px;">
    </div>
  </template>
  <template #footer>
    <van-button size="mini" @click="sc(item.id)">取消</van-button>
    <van-button size="mini" @click="zf">支付</van-button>
  </template>
</van-card>
</van-swipe-cell>

  </van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>

    </div>
<!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
  </van-list>
</van-pull-refresh>
</template>

<script setup>
const onClickLeft = () => history.back();
import { ref } from 'vue';
import router from '@/router';
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);

    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }

        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }
        loading.value = false;

        if (list.value.length >= 40) {
          finished.value = true;
        }
      }, 1000);
    };

    const onRefresh = () => {
      // 清空列表数据
      finished.value = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      onLoad();
    };
import { createApi } from '@/api/api';
import { useCounterStore } from '@/stores/cart'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
let cartData=ref([])
let cart=()=>{
    cartData.value=store.piniaCart
}
cart()   
const sc=(id)=>{
cartData.value=store.piniaCart.filter(item=>item.id=!id)
// cart() 
} 

 const checked = ref(true);
 const zf=()=>{
    router.push('/ddxx')
 }
</script>

<style lang="scss" scoped>

</style>